	var save_notes=[];
	var save_time=0;
	var JG=15,CH=200,CW=600;
	function initSave(){
		is_save=true;


    	ctx.fillStyle = "white";
    	ctx.fillRect(0,0,CW,CH);

    	ctx.beginPath();
    	for (var i = 1; i < CH/JG; i++) {
    		
			ctx.moveTo(0,i*JG);
			ctx.lineTo(CW,i*JG);
    	};
		ctx.stroke();

		save_notes=[];
		save_time=new Date().getTime();


	}
	function saveSound(noteNumber){
		if(!is_save) return;
		if(!save_notes||save_time==0) initSave();
		var time=new Date().getTime()-save_time;

		var note={key:noteNumber,time:time};
		save_notes.push(note);
		draw(note);
	}

	var is_save=true;
	var is_play=false;
	var playMusic=null;
	function playStart(){ 
		if(!save_notes[0]){ 
			return false;
		}
		if(playMusic) clearTimeout(playMusic);
		document.getElementById("startBtn").innerHTML="结束播放";
		document.getElementById("startBtn").onclick=playStop;
		is_play=true;
		is_save=false;
		play_now=0;
		doPlay();
	}


	function playStop(){ 
		is_play=false;

		document.getElementById("startBtn").innerHTML="开始播放";
		document.getElementById("startBtn").onclick=playStart;
	}
	var play_now=0;
	function doPlay(){
		if(!is_play) return;
		playSound(save_notes[play_now].key);
		draw(save_notes[play_now],2);
		if(play_now!=0)
			draw(save_notes[play_now-1],0);
		play_now++;
		if(save_notes[play_now])
			playMusic=setTimeout(function(){doPlay(play_now)},save_notes[play_now].time-save_notes[play_now-1].time);
		else{
			draw(save_notes[play_now-1],0);
			playStop();
		}
	}
	var notes_font=["♪","♫","♪","♫","♪","♫","♪","♫","♪","♫","♪","♫","♪"];
	var type_color=["#666","#996600","#006699"]
	function draw(note,type){

	type=type?type:0; 
    ctx.font = "30px Courier New";
    ctx.fillStyle = type_color[type];
    var d =note.key-60;

    ctx.fillText(notes_font[d], note.time/40,(d+1)*JG);

	}